<template>
  <div class="login-container">
    <!--登录面板内容部分-->
    <div class="login-inner">
      <!--面板头部-->
      <div class="login-header">
        <div class="login-logo">
          <img src="./images/lk_logo_sm.png" alt="" width="250">
        </div>
        <!--面板标题-->
        <div class="login-header-title">
          <a href="javascript:;" :class={current:loginMode} @click="dealLoginFlag(true)">验证码登录</a>
          <a href="javascript:;" :class={current:!loginMode} @click="dealLoginFlag(false)">密码登录</a>
        </div>
      </div>
      <!--面板表单部分-->
      <div class="login-content">
        <form>
          <!--手机验证码登录部分-->
          <div :class={current:loginMode}>
            <section class="login-message">
              <input type="tel" maxlength="11" placeholder="手机号" v-model="phone">
              <button
                v-if="!countDown"
                class="get-verification" 
                :class={phone_right:phoneRight} @click.prevent="getYzcode">
                获取验证码
              </button>
              <button
                v-else
                disabled="disabled"
                class="get-verification">
                已发送({{countDown}})
              </button>
            </section>
            <section class="login-verification">
              <input type="tel" maxlength="8" placeholder="验证码" >
            </section>
            <section class="login-hint">
              温馨提示：未注册撩课帐号的手机号，登录时将自动注册，且代表已同意
              <a href="javascript:;">服务协议与隐私政策</a>
            </section>
          </div>
          <!--账号登录部分-->
          <div :class={current:!loginMode}>
            <section>
              <section class="login-message">
                <input type="text" maxlength="11" placeholder="用户名/手机/邮箱">
              </section>
              <section class="login-verification">
                <input type="password" maxlength="18" placeholder="密码" v-if="pwdMode">
                <input type="text" maxlength="18" placeholder="密码" v-else>
                <div class="switch-show">
                  <img :class={on:pwdMode} @click.prevent="dealPwdMode(false)" src="./images/hide_pwd.png" alt="" width="20" v-if="pwdMode">
                  <img :class={on:!pwdMode} @click.prevent="dealPwdMode(true)" src="./images/show_pwd.png" alt="" width="20" v-else>
                </div>
              </section>
              <section class="login-message">
                <input type="text" maxlength="11" placeholder="验证码">
                <img
                  class="get-verification"
                  src="http://127.0.0.1:3000/api/captcha" ref="captcha" @click="getCaptcha()"
                >
              </section> 
            </section>
          </div>
          <button class="login-submit" >登录</button>
        </form>


        <button class="login-back" >返回</button>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: "Login",
    data(){
        return{
            loginMode:true,     //登录方式，true验证码登录 false账号登录
            phone:'',           //手机号码
            countDown:0,        //验证码倒计时
            regExp:/^1(3|4|5|7|8)\d{9}$/,
            pwdMode:true,       //密码显示方式：true密文，false明文
            pwd:'',
        }
    },
    methods:{
      //处理登录模式
      dealLoginFlag(flag){
            this.loginMode = flag;
          },

      //获取验证码
      getYzcode(){
        //开启倒计时
        if (this.phoneRight) {
          this.countDown = 10;
          this.intervalId = setInterval(()=>{
            this.countDown--;
            if (this.countDown === 0) {
              clearInterval(this.intervalId);
            }
          },1000)
        }
      },

      //密码显示方式
      dealPwdMode(flag){
        this.pwdMode = flag;
      },

      //获取图形验证码
      getCaptcha(){
        this.$refs.captcha.src="http://127.0.0.1:3000/api/captcha?" + new Date(); 
      }
      
    },
    computed:{
      //验证手机是否合理
      phoneRight(){
        return this.regExp.test(this.phone);
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixins.styl"
  .login-container
    width 100%
    height 100%
    background #fff
    .login-inner
      padding-top 60px
      width 80%
      margin 0 auto
      .login-header
        .login-logo
          font-size 40px
          font-weight bold
          color mediumpurple
          text-align center
        .login-header-title
          padding-top 40px
          padding-bottom 10px
          text-align center
          > a
            color #333
            font-size 14px
            padding-bottom 4px
            &:first-child
              margin-right 40px
            &.current
              color mediumpurple
              font-weight 700
              border-bottom 2px solid mediumpurple
      .login-content
        > form
          > div
            display none
            &.current
              display block
            input
              width 100%
              height 100%
              padding-left 8px
              box-sizing border-box
              border 1px solid #ddd
              border-radius 4px
              outline 0
              font 400 14px Arial
              &:focus
                border 1px solid mediumpurple
            .login-message
              position relative
              margin-top 16px
              height 48px
              font-size 14px
              background #fff
              .get-verification
                position absolute
                top 50%
                right 10px
                transform translateY(-50%)
                border 0
                color #ccc
                font-size 14px
                background transparent
                &.phone_right
                  color purple
            .login-verification
              position relative
              margin-top 16px
              height 48px
              font-size 14px
              background #fff
              .switch-show
                position absolute
                right 10px
                top 12px
                img
                  display none
                img.on
                  display block
            .login-hint
              margin-top 12px
              color #999
              font-size 12px
              line-height 20px
              > a
                color mediumpurple
          .login-submit
            display block
            width 100%
            height 42px
            margin-top 30px
            border-radius 4px
            background mediumpurple
            color #fff
            text-align center
            font-size 16px
            line-height 42px
            border 0
        .login-back
          display block
          width 100%
          height 42px
          margin-top 15px
          border-radius 4px
          background transparent
          border: 1px solid mediumpurple
          color mediumpurple
          text-align center
          font-size 16px
          line-height 42px
</style>
